<template>
    <div>
        <div v-if="currentPanel == 'list'">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>删人提醒</span>
                </div>
                <el-row>
                    <el-col :span="22">
                        <!--<el-select disabled value="全部部门"></el-select>
                        <el-divider direction="vertical"></el-divider>-->
                        <el-select v-model="selector" placeholder="请选择员工">
                            <el-option v-for="item in selectors" :key="item.empId" :label="item.empName"
                                       :value="item.empId"></el-option>
                        </el-select>
                        <el-divider direction="vertical"></el-divider>
                        <el-date-picker v-model="timeInterval" type="daterange" range-separator="至" start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                        </el-date-picker>&nbsp;&nbsp;
<!--                        <el-divider direction="vertical"></el-divider>-->
                        <el-button type="primary" @click="queryData">查询</el-button>
                        <el-button type="primary" @click="empty">清空</el-button>
                        <el-divider direction="vertical"></el-divider>
                        <span v-if="deleteRemind.infractionAlertStatus == 1">提醒通知：已开启</span>
                        <span v-else>提醒通知：未开启</span>
                    </el-col>
                    <el-col :span="22">
                        <div class="interspaceH"></div>
                        <el-button type="primary" @click="setUp">提醒设置</el-button>
<!--                        <el-button @click="exportNotice">导出</el-button>-->
                    </el-col>
                </el-row>

                <div class="interspaceH"></div>

                <el-table :data="dataSource" :header-cell-style="{background:'#F3F4F7',color:'#555'}"
                          style="width: 100%">
                    <el-table-column prop="clientName" label="删除客户"></el-table-column>
                    <el-table-column prop="empName" label="操作人"></el-table-column>
                    <el-table-column prop="deleteTime" label="删除时间"></el-table-column>
                    <el-table-column prop="joinTime" label="添加好友时间"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button @click="chatHandle(scope.row)" type="text" size="small" style="color: #8c8c8c">查看聊天</el-button>
                            <el-divider direction="vertical"></el-divider>
                            <el-button @click="detailHandle(scope.row)" type="text" size="small">客户详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="interspaceH"></div>

                <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                               @current-change="queryDataHandle($event,pagePagination.pageSize)"
                               :current-page="pagePagination.currentPage"
                               :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                               layout="total, sizes, prev, pager, next"
                               :total="pagePagination.total">
                </el-pagination>
            </el-card>
        </div>

        <div v-if="currentPanel == 'setUp'">
            <SetUp :infraction="deleteRemind" @currentHandle="currentHandle"/>
        </div>

        <ClientDetail ref="clientDetail"/>

        <div v-if="currentPanel == 'chat'">
            <SessionContent :jump="queryChat" @currentHandle="currentHandle"/>
        </div>
    </div>
</template>

<script>
    import SetUp from "@/views/riskControl/illegal_remind/set_up"
    import SessionContent from "@/views/riskControl/session_content/index"
    import ClientDetail from '@/views/customer/client/client_detail'

    export default {
        components: {
            SetUp,
            ClientDetail,
            SessionContent,
        },
        data() {
            return {
                type: 'delete_remind',
                currentPanel: 'list',
                dataSource: [],
                //选择查询
                selectors: [],
                selector: '',
                // 分页参数
                pagePagination: {
                    currentPage: 1,
                    pageSizes: [10, 15, 20, 25],
                    pageSize: 10,
                    total: 0
                },
                deleteRemind: {},
                timeInterval: [],
                startTime: '',
                endTime: '',
                queryChat:{},
            }
        },
        mounted() {
            this.getRemind();
            this.queryDataHandle();
        },
        methods: {
            getRemind(){
                let that = this
                let param = {
                    infractionAlertType: that.type
                }
                this.$request('/api/infraction/getByTitle/1_0', param, 'POST').then((data) => {
                    that.deleteRemind = data.rows[0]
                })
                this.$request('/api/emp/getAllEmp/1_0', {}, 'POST').then((data) => {
                    that.selectors = data.rows
                })
            },
            queryData(){
                if (this.timeInterval != null && this.timeInterval.size !== 0){
                    this.startTime = this.timeInterval[0]
                    this.endTime = this.timeInterval[1]
                }
                this.queryDataHandle(this.pagePagination.currentPage,this.pagePagination.pageSize)
            },
            // 分页插件事件
            queryDataHandle(page = 1, row = 10) {
                let that = this;
                let payload = {
                    empId: that.selector,
                    pageNum: page,
                    pageSize: row,
                    startTime: that.startTime,
                    endTime: that.endTime,
                }
                that.$request("/api/deleteRemind/getDeleteClient/1_0", payload, "POST").then((data) => {
                    that.pagePagination['total'] = data.total
                    that.pagePagination['pageSize'] = row
                    that.dataSource = data.rows
                })
            },
            currentHandle(e) {
                this.currentPanel = e;
            },
            //导出
            // exportNotice() {
            //     this.$message({
            //         type: 'success',
            //         message: '导出成功!'
            //     });
            // },
            setUp() {
                this.currentPanel = 'setUp'
            },
            detailHandle(row) {
                this.$refs.clientDetail.open(true, row)
            },
            chatHandle(row) {
                this.queryChat = {
                    empId: row.empId,
                    clientId: row.clientId
                }
                this.currentPanel = 'chat'
            },
            empty(){
                this.selector = '';
                this.timeInterval = []
            },
        }
    }
</script>

<style scoped>
    .box-card .el-input {
        width: 200px;
    }

    .box-card .el-select {
        width: 200px;
    }

    a {
        color: #298bef;
    }
</style>
